<template>
  <div class="dynamic">
    <div class="line">
        <div v-if="itemData.isShowTime" class="point-wrapper"><div class="point"></div></div>
        <div class="line-detail"></div>
    </div>
    <div class="dynamic-item">
      <div>
          <div v-if="itemData.isShowTime" class="showTime">{{itemData.showTime}}</div>
      </div>
      <div class="middle">
        <div class="title-container" v-if="itemData.title">
          <div class="title">{{itemData.title !==undefined &&itemData.title}}</div>
        </div>
        <div class="topic-container">
          <div class="topic" v-if="itemData.topics && itemData.topics.length>0" v-tap="{methods:goAllComments, item: itemData}">
	            {{itemData.topics[0].content | topic}}
	            <span class="topic-content">{{itemData.content}}</span>
          </div>
          <div v-else v-html="emojiFilter(itemData.content)" v-tap="{methods:goAllComments, item: itemData}"></div>
        </div>
        <!--start 发音频 -->
        <magic-audio v-if="itemData.audios && itemData.audios.length>0" :audioData="itemData | audioData"></magic-audio>
        <!--end 发音频 -->
        <!--start 发视频 -->
        <video class="video" v-if="itemData.videos && itemData.videos.length>0" poster="defaultAvatar" controls :src="addPath(itemData.videos[0])"></video>
        <!--end 发视频 -->
        <!--start 发图片 -->
        <magic-image v-if="itemData.images && itemData.images.length>0" :bigImage="itemData.images"></magic-image>
        <!--end 发图片 -->
      </div>
     <div class="bottom">
        <div class="left">
          <img :src="itemData.avatar" />
        </div>
        <div class="right">
          <div class="row">
            <div class="dynamic-name">
              {{itemData.author.name}}
            </div>
          </div>
        </div>
        <div class="reply" v-tap="{methods:goComment,id:itemData.id}">
          <img :src="dissIcon" class="icon-discuss" />{{itemData.commentCount}}
        </div>
        <div class="like" v-tap="{methods:like,id:itemData.refId}" v-if="support">
          <img v-show="isSupport === '0'" class="icon-discuss" :src="heartIcon" />
          <img v-show="isSupport === '1'" class="icon-discuss" :src="heart1Icon" />{{supportCount}}
        </div>
        <div class="like" v-tap="{methods:like,id:itemData.refId}" v-if="!support">
          <img v-show="itemData.hasFollow === '0'" class="icon-discuss" :src="heartIcon" />
          <img v-show="itemData.hasFollow === '1'" class="icon-discuss" :src="heart1Icon" />{{itemData.followCount}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import defaultAvatar from "assets/default_user_icon.png";
import dissIcon from "assets/discuss.svg";
import heartIcon from "assets/heart.svg";
import heart1Icon from "assets/heart1.svg";
import magicAudio from "components/audio/ma_audio";
import magicImage from "components/image/ma_image";
// service
import CreateSpaceSupportService from "services/community/CreateSpaceSupport";
import DeleteSpaceService from "services/community/DeleteSpace";
import emojiService from "services/common/emoji";

export default {
  name: "dynamic",
  data() {
    return {
      audioData: {
        id: "",
        url: ""
      },
      support: false,
      isSupport: "",
      supportCount: "",
      dissIcon,
      heartIcon,
      heart1Icon
    };
  }, // 截取日期字符串
  components: {
    magicAudio,
    magicImage
  },
  filters: {
    sliceDate: function(value) {
      if (!value) return "";
      return value.slice(5, 10);
    },
    topic(value) {
      return "#" + value + "#";
    },
    audioData(value) {
      return {
        id: value.id,
        url: value.audios[0]
      };
    }
  },
  computed: {
    showComments() {
      if (this.itemData.comments === undefined) {
        return false;
      } else {
        return this.itemData.comments.slice(0, 3);
      }
    }
  },
  watch: {
    itemData(newV, oldV) {
      return newV;
    }
  },
  props: {
    itemData: {
      type: Object,
      required: true
    },
    showBottom: {
      type: Boolean,
      required: false,
      default() {
        return true;
      }
    },
    showDetail: {
      type: Boolean,
      required: false,
      default() {
        return true;
      }
    }
  },
  methods: {
    emojiFilter(content) {
      // test
      // content = "[:D]123[<//>]123awedasdasd";
      if (content) {
        for (let key in emojiService.EMOJI_MAP) {
          content = content.replace(key, function() {
            let src = emojiService.getEmojiSrc(key);
            return `<img width=22 src="${src}">`;
          });
        }
      }
      return content;
    },
    //返回机制：若returnNative传了一个true值，会使用桥接的back 这里需要在相应的auth下配置native为true，并且在首位导航判断search。
    deleteDynamic(params) {
      let vm = this;
      this.$.confirm(
        {
          msg: "确认删除吗？"
        },
        () => {
          DeleteSpaceService.bind(vm)(
            {
              ids: [params.id]
            },
            res => {
              // 删除成功则向父组件发送removeSuccess事件
              vm.$emit("removeSuccess");
              console.log(res);
            }
          );
        }
      );
    },
    goArticle(params) {
      //进入文章
      console.log(params);
      let item = params.item.share;
      this.$router.push({
        name: "channelDetail",
        query: {
          channel: JSON.stringify({
            desc: item.content,
            id: item.id,
            image: item.image,
            name: item.title,
            publishDate: params.item.publishDate,
            url: this.addPath(item.path)
          })
        }
      });
    },
    goComment(params) {
      if (this.$.userId) {
        //进入评论
        this.$router.push({
          name: "new_comment",
          params: {
            id: params.id
          }
        });
      } else {
        this.$.goLogin({
          name: "login"
        });
      }
    },
    goAllComments(params) {
      //全部评论
      this.$router.push({
        name: "new_comment_detail",
        query: {
          id: params.item.id,
          refId:params.item.refId
        },
        params: {
          item: params.item
        }
      });
    },
    like(params) {

      if (this.$.userId) {
        //点赞
        CreateSpaceSupportService.bind(this)(
          {
            spaceId: params.id
          },
          resp => {
            {
              this.support = true;
              this.isSupport = resp.isSupport;
              this.supportCount = resp.supportCount;
            }
          }
        );
      } else {
        this.$.goLogin({
          name: "login"
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.dynamic {
  display: flex;
}
.dynamic .line {
  flex: 1;
  position: relative;
}
.dynamic .point-wrapper {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fee1bf;
  border: 1px solid #f98700;
  position: absolute;
  left: calc(50% - 8px);
  z-index: 1;
}
.dynamic .point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f98700;
  position: absolute;
  left: calc(50% - 4px);
  top: 2px;
}
.dynamic .line-detail {
  width: 1px;
  height: 100%;
  background-color: #f98700;
  position: absolute;
  left: calc(50% - 1px);
}
.dynamic-item {
  flex: 0 0 92vw;
  display: flex;
  flex-flow: column;
  padding: 0.5rem 1em 1em 1em;
  border-bottom: 2px solid #eee;
}

.bottom {
  display: flex;
}

.bottom .left {
  padding: 4px;
}

.bottom .left img {
  width: 30px;
  height: 30px;
  flex: 1 1 0;
  border-radius: 20px;
  overflow: hidden;
}

.bottom .right {
  flex: 4 1 0;
  color: #1f1f1f !important;
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 4px;
}

.dynamic-title {
  font-size: 16px;
  margin-bottom: 6px;
}
.showTime {
  padding-left: 5px;
  font-size: 14px;
  color: 1f1f1f;
  margin: 10px 0;
}
.row {
  display: flex;
  justify-content: flex-start;
}

.dynamic-name {
  color: #1f1f1f;
  margin-right: 1em;
}

.delete {
  color: #f98700;
}

.middle {
  padding: 6px;
}

.bottom {
  display: flex;
  font-size: 14px;
}
.title-container {
  color: #070707;
  font-size: 14px;
}
.topic-container {
  margin-top: 5px;
  font-size: 14px;
  color: #8f8f94;
  width: 82vw;
}
.topic-container .topic-content {
  display: block;
  font-size: 14px;
  color: #8f8f94;
  margin-top: 5px;
}
.image-container {
  margin-top: 5px;
}
.topic {
  color: #070707;
  margin-right: 0.5em;
}
.topic span {
  color: rgba(0, 0, 0, 0.87);
}

.reply,
.like {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
}

.icon-mess {
  font-size: 19px;
}

.icon-heart {
  font-size: 14px;
}

.icon-heart1 {
  font-size: 19px;
  color: #f98700;
  margin-top: 2px;
}

i {
  margin-right: 2px;
}

.comments {
  display: flex;
  flex-flow: column;
  padding: 1em;
  background: #f2f2f2;
  margin: 0.5em;
}

.comments-item {
  padding: 0.5em;
}

.all-comments {
  display: flex;
  justify-content: center;
  color: #f98700;
  padding: 1em;
}

.comments-item .left {
  color: #f98700;
}

.video {
  width: 90%;
  height: 75vw;
}

.icon-discuss {
  padding-right: 5px;
}
.topic-container > div,
.topic-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 16px;
  font-size: 14px;
}
</style>